<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script src="./jq-3.6.0.min.js"></script>
  <script>

    // 插入内部
    // 向dom中插入元素，放在所有元素后面
    // 相当于原生的appendChild
    $('ul').append('<li>5</li>');

    // appendTo 插入在指定元素后面
    $('<li>6</li>').appendTo($('ul'));

    // prepend  prependTo 和上面刚好相反
    // 这里需要注意
    $('ul').prepend('<li>7</li>');
    $('<li>8</li>').prependTo($('ul'));

    // 外部添加
    // 放在ul的后面
    $('ul').after('<p>11</p>');
    // 放在ul的前面
    $('ul').before('<p>22</p>');

    // insertBefore  insertAfter就不举例了  容易和原生混淆，而且完全可以被替代

    // 替换
    // 把ul的第一个元素替换成h3
    $('ul li').eq(0).replaceWith('<h3>替换了</h3>');

    // 删除元素中的所有内容 相当于原生的innerHTML = '';
    $('ul li').eq(3).empty();

    // 移除元素 
    // 把h3元素移除
    $('h3').remove();

    // 复制元素
    console.log($('p').eq(0).clone());
    $('ul').append($('p').eq(0).clone());
    $('p').eq(0).clone().appendTo($('ul'));
  </script>
</body>
</html>